import * as echarts from "echarts";
import ReactECharts from "echarts-for-react";
import React from "react";
const ChildrenEcharts = (props) => {
  const { label, graphic, airvalue } = props;

  var baifenbi = [airvalue];
  var zongjine = [200];

  const graphic1 = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    { offset: 0, color: "rgba(255, 110, 0, 0.1)" },
    { offset: 0.6, color: "#ff6e00" },
    { offset: 1, color: "#ff6e00" },
  ]);
  const graphic2 = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    { offset: 0, color: "#8b9fff" },
    { offset: 1, color: "#18f5ff" },
  ]);

  const graphic3 = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    { offset: 0, color: "rgba(0, 255, 157, 0.1)" },
    { offset: 0.6, color: "#00ff9d" },
    { offset: 1, color: "#00ff9d" },
  ]);
  const option = {
    color: ["#61A8FF"], //进度条颜色
    grid: {
      left: 10,
      right: 10,
      top: 80,
      containLabel: false,
    },
    xAxis: [
      {
        axisLabel: {
          show: false, //让Y轴数据不显示
        },
        show: false,
      },
      //由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
      {
        show: false,
      },
    ],
    yAxis: [
      {
        type: "category",
        axisLabel: {
          show: false, //让Y轴数据不显示
        },

        axisTick: {
          show: false, //隐藏Y轴刻度
        },
        axisLine: {
          show: false, //隐藏Y轴线段
        },
      },
      {
        show: true,
        inverse: true,
        data: zongjine,
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
          align: "right",
          verticalAlign: "bottom",
          formatter: function () {
            return airvalue + "μg/m3" || "μg/m3";
          },
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        show: true,
        type: "bar",
        barWidth: "5px", //统计条宽度
        itemStyle: {
          color:
            graphic === "graphic1"
              ? graphic1
              : graphic === "graphic2"
              ? graphic2
              : graphic3,
        },

        max: 1,
        labelLine: {
          show: false,
        },
        z: 2,
        data: baifenbi,
      },
      {
        show: true,
        type: "bar",
        barGap: "-100%",
        barWidth: "5px", //统计条宽度
        itemStyle: {
          normal: {
            barBorderRadius: 200,
            color: "rgba(22,203,115,0.05)",
          },
        },
        label: {
          color: "#278dba",
          fontSize: 12,
          show: true,
          position: [0, "-220%"],
          formatter: function (data) {
            return label;
          },
        },

        data: zongjine,
      },
    ],
  };

  return (
    <ReactECharts
      option={option}
      style={{
        height: "30px",
        width: "100%",
      }}
    />
  );
};

export default ChildrenEcharts;
